<template>
  <div class="goods" :class="{active: isclose}">
    <div class="head">
      <h2>商品列表</h2>
      <addgood></addgood>
    </div>
    <!-- 商品列表 -->
    <table class="good-table">
      <thead class="good-thead">
        <tr>
          <th>序号</th>
          <th>商品图片</th>
          <th>商品名称</th>
          <th>商品价格</th>
        </tr>
      </thead>
      <tbody class="good-tbody">
        <tr v-for="item in goods['pop'].list.slice(0,15)" :key="item.id">
          <td>{{item.shopId}}</td>
          <td class="img-td">
            <img :src="item.show.img" alt="">
          </td>
          <td>{{item.title}}</td>
          <td>{{item.price}}</td>
          <button class="xiugai" @click="lookmessage(item)">详情</button>
          <button class="shangchu" @click="exit(item.iid)">删除</button>
        </tr>
      </tbody>
    </table>
    <div class="page">
      <el-pagination layout="prev, pager, next" :total="30" background />
    </div>
   
   
   <!-- 商品详情页面 -->
   <div class="mess-all">
      <div class="goods-message" v-show="isclose">
        <div class="message-head">
          <span class="mess-title">商 品 详 情</span>
          <span class="mess-back" @click="closeitem">X</span>
        </div>
        <div class="mess-neirong">
          <div class="neirong-left">
            <img :src="goodmessage.show.img" alt="">
          </div>
          <div class="neirong-right">
            <h3>
              {{goodmessage.title}}
            </h3>
            <span class="first">商品ID： {{goodmessage.iid}}</span>
            <span>原价： {{goodmessage.orgPrice}}</span>
            <span>现价： {{goodmessage.price}}</span>
            <span>销售量： {{goodmessage.sale}}</span>
            <!-- <span>原价： {{goodmessage.orgPrice}}</span> -->
            <!-- {{goodmessage.iid}} -->
          </div>
        </div>
    </div>
    </div>
  </div>
</template>

<script>
import { getHomeGoods } from "../../../network/home.js"
import addgood from './childcomp/addgood.vue'

export default {
    name: 'goods',
    components: {
      addgood
    },
    data() {
      return {
        //存放请求的商品数据
        goods: {
            'pop': {page: 0,list:[]},
          },
        goodmessage: {
          show: {img: "../../../assets/navlogo.png"}
        },
        isclose: false,
      }
    },
    created() {
      getHomeGoods('pop', 1).then(res => {
        // console.log(res)
        this.goods['pop'].list.push(...res.data.list)
        // console.log(this.goods['pop'].list)
      })
    },
    beforeUnmount() {
      //提交商品数量
      localStorage.setItem('goodnum',this.goods['pop'].list.length)
    },
    methods: {
      exit(iid) {
        // console.log(iid)
        //传入删除商品iid
        let exitid = iid
        //for循环找到数组中iid对应的商品
        for(let i=0;i<this.goods['pop'].list.length;i++){
          // console.log(i)
          if(exitid == this.goods['pop'].list[i].iid){
            // console.log(123)
            //删除数组中的商品信息
            this.goods['pop'].list.splice(i,1)
          }
        }
      },
      lookmessage(item) {
        // console.log(item)
        this.isclose = !this.isclose
        this.goodmessage = item
        // console.log(this.goodmessage)
      },
      closeitem() {
        this.isclose = !this.isclose
      }
    },
}
</script>

<style scoped>
  .goods {
    position: relative;
  }
  .head {
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    /* background-color: #ccc; */
  }

  .good-table {
    width: 80%;
    margin: 10px auto;
  }
  .good-thead {
    font-size: 20px;
    height: 50px;
    line-height: 50px;

  }
 
  .good-tbody img{
    width: 60px;
    height: 60px;
    /* z-index: -1; */
    background-color: #fff;
    opacity: .9;
  }
  .good-tbody tr {
    text-align: center;
    
  }
  .good-tbody tr:nth-child(2n-1) {
    background-color: rgb(233, 233, 233);
  }
  .good-tbody button {
    margin-top: 18px;
    border: none;
    width: 80px;
    height: 30px;
    /* background-color: lightskyblue; */
    color: #fff;
    border-radius: 8px;
  }
  .good-tbody .xiugai{
    background-color: lightskyblue;
  }
  .good-tbody .shangchu{
    margin-left: 10px;
    background-color: red;
  }
  .goods-message {
    position: absolute;
    /* display: flex; */
    width: 800px;
    height: 550px;
    top: 200px;
    left: 850px;
    border-radius: 10px;
    background-color: #fff;
    /* box-shadow: 3px 3px 2px #ccc; */
  }
  .message-head {
    width: 100%;
    height: 50px;
    line-height: 50px;
    overflow: hidden;
    /* box-shadow: 2px 0px 2px #ccc; */
  }
  .message-head span {
    display: inline-block;
  }
  .mess-title {
    float: left;
    margin-left: 15px;
    font-weight: bolder;
    font-size: 20px;
  }
  .mess-back {
    float: right;
    margin-right: 15px;
    font-weight: bolder;
    font-size: 20px;
    color: #ccc;
  }
  .mess-back:hover {
    color: rgb(0, 209, 209);
  }
  .active {
    /* display: none; */
    background-color: rgba(14, 14, 14, 0.74);
    z-index: 100;
  }
  .active .good-tbody tr:nth-child(2n-1){
    background-color: rgba(14, 14, 14, 0.74);
  }
  .active .good-tbody button {
    background-color: rgba(14, 14, 14, 0.74);
    color: rgba(104, 104, 104, 0.74);
  }
  .active .good-tbody img {
    opacity: 0.5;
  }
  .mess-neirong {
    overflow: hidden;
    display: inline-block;
    box-sizing: border-box;
  }
  .neirong-left {
    /* display: inline-block; */
    float: left;
    height: 500px;
    width: 200px;
    background-color: rgba(209, 209, 209, 0.336);
  }
  .neirong-right {
    /* display: inline-block; */
    /* box-sizing: border-box; */
    width: 584px;
    /* background-color: green; */
    float: right;
    margin-left: 8px;
    margin-right: 8px;
    word-break: break-all;
    word-wrap: break-word;
    /* float: left; */
  }
  .neirong-right h3 {
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
  }
  .neirong-right .first{
    /* display: inline-block; */
    margin-top: 10px;
    /* padding-top: 10px; */
    /* background-color: #ccc; */
  }
  .neirong-right span {
    /* margin-top: 5px; */
    display: block;
    /* display: inline-block; */
    height: 80px;
    line-height: 80px;
    border-bottom: 1px solid #ccc;
  }
  
  .mess-neirong img{
    margin-top: 20px;
    margin-left: 16px;
    height: 250px;
    width: 170px;
    border-radius: 10px;
  }
  .page {
    /* background-color: green; */
    padding-left: 800px;
    margin-top: 30px;
  }
</style>